<template>
    <div class="box">
        <svg xmlns="http://www.w3.org/2000/svg" width="1020" height="220">
            <line x1="0" x2="1020" y1="0" y2="0" class="top"/>
            <line x="20" x2="1020" y1="220" y2="220" class="bottom"/>
            <line x1="0" x2="0" y1="0" y2="220" class="left"/>
            <line x1="1020" x2="1020" y1="0" y2="220" class="right"/>
        </svg>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped lang="less">
    .box {
        width: 1020px;
        height: 220px;
        position: relative;
        display: inline-block;
        margin: 0 10px;
        cursor: pointer;
        -webkit-transition: background 0.4s 0.5s;
        transition: background 0.4s 0.5s;
        svg {
            position: absolute;
            top: 0;
            left: 0;
            line {
                stroke-width: 5;
                stroke: gray;
                fill: none;
                -webkit-transition: all .8s ease-in-out;
                transition: all .8s ease-in-out;
            }
            .top,
            .bottom{
                stroke-dasharray: 1200 50; 
            }
            .left,
            .right {
                stroke-dasharray: 490 400;
            }
        }
    }

    .box:hover {
        background: rgba(255,255,255,0);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    // .box:hover svg line {
    //     -webkit-transition-delay: 0.1s;
    //     transition-delay: 0.1s;
    // }

    .box:hover svg line.top {
        transform: translateX(-900px);
    }

    .box:hover svg line.bottom {
        transform: translateX(900px);
    }

    .box:hover svg line.left {
        transform: translateY(-100px);
    }

    .box:hover svg line.right {
        transform: translateY(100px);
    }
</style>